<!-- 库存管理 -->
<template>
	<view style="margin: 50rpx;">
		<view style="display: flex; justify-content: flex-end; align-items: flex-end;">
			<image src="../../static/tabBar/my-active.png" style="width: 40rpx; height: 40rpx;" @click="myfiles">
			</image>
		</view>

		<view style="color: #0070D9;font-size: 40rpx;font-weight: bold;">

			<view style=" border-bottom: 5rpx solid #0070D9;width: 160rpx;">新增产品</view>
		</view>
		<view style="margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">产品名称:</text>
			<view style="height: 10rpx;"></view>
			<u--input class="u-inp" placeholder="请输入产品名称" border="surround" v-model="info.name"></u--input>
		</view>

		<view style="margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">型号:</text>
			<view style="height: 10rpx;"></view>
			<u--input class="u-inp" placeholder="请输入产品型号" border="surround" v-model="info.name"></u--input>
		</view>

		<view style="margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">价格:</text>
			<view style="height: 10rpx;"></view>
			<u--input class="u-inp" placeholder="请输入产品价格" border="surround" v-model="info.name"></u--input>
		</view>


		<!-- 选择供应商 -->
		<u-picker :show="show3" :columns="columns3" keyName="label" @confirm="confirm3"
			@cancel="show2=false"></u-picker>
		<view style=" margin: 30rpx;">
			<view style="display: flex;">
				<button
					style="font-size: 25rpx;background-color: green;font-weight: bold; color: white;margin-left: 20rpx;"
					@click="show4=true">设置产品零件</button>
			</view>
		</view>
		<!-- 新增供应商 -->
		<u-popup :show="show4" @close="show4=false" @open="open4">
			<view style="height: 1300rpx;">
				<view style="height: 40rpx;color: gray;display: flex;justify-content: space-between;margin: 30rpx;">
					<view>零件名称</view>
					<view>型号</view>
					<view>操作</view>
				</view>
				<!-- 已添加零件 -->
				<view style="display: flex;flex-wrap: wrap; margin: 20rpx;">
					<view style="height: 40rpx;width: 120rpx;margin: 10rpx; padding: 10rpx; background-color: aquamarine;display: inline-block;width: auto;border-radius: 10rpx;">键盘x 220</view>
										<view style="height: 40rpx;width: 120rpx;margin: 10rpx; padding: 10rpx; background-color: aquamarine;display: inline-block;width: auto;border-radius: 10rpx;">键盘x 220</view>
															<view style="height: 40rpx;width: 120rpx;margin: 10rpx; padding: 10rpx; background-color: aquamarine;display: inline-block;width: auto;border-radius: 10rpx;">键盘x 220</view>
																				<view style="height: 40rpx;width: 120rpx;margin: 10rpx; padding: 10rpx; background-color: aquamarine;display: inline-block;width: auto;border-radius: 10rpx;">键盘x 220</view>
																									<view style="height: 40rpx;width: 120rpx;margin: 10rpx; padding: 10rpx; background-color: aquamarine;display: inline-block;width: auto;border-radius: 10rpx;">键盘x 220</view>
					
				</view>
				<view style="height: 60%; overflow-y: scroll;">

					
					<view style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">添加零件</view>
					</view>
					
					<view style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">添加零件</view>
					</view>
					
					<view style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">添加零件</view>
					</view>
					
					
					<view style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">添加零件</view>
					</view>
					
					
					<view style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">添加零件</view>
					</view>
					<view style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">添加零件</view>
					</view>
					
					<view style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">添加零件</view>
					</view>

				</view>
				<button style="background-color: black;border-radius: 10rpx;color: white;margin: 50rpx;margin-top: 20rpx;">添加零件配置</button>

			</view>
		</u-popup>
		
		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">产品描述：</text>
			<view style="height: 10rpx;"></view>
			<view style="border-radius: 10rpx;border: 1rpx solid gray;">
				<textarea rows="8" cols="80" style="margin:10rpx; width: 95%;"></textarea>
			</view>
		</view>
		
		<view style=" margin: 30rpx;">
			<text style="margin-top: 10rpx; color: gray;">产品图片：</text>
			<view style="height: 10rpx;"></view>
		<!-- 上传图片 -->
		<view style="display: flex;flex-wrap: wrap;padding: 20rpx;">
			<view style="margin: 30rpx;" v-for="(inti,index) in images">
				<!-- 删除该图片按钮 -->
				<view
					style="position: absolute; background-color: gray;border-radius: 50%;height: 35rpx;width: 35rpx;z-index: 99;"
					@click="updateImgs(index)">
					<image src="../../static/gb.png" style="width: 35rpx;height: 35rpx;"></image>
				</view>
				<image :src="lone+inti" style="width: 160rpx;height: 160rpx;"></image>
			</view>
			<view
				style="width: 160rpx;height: 160rpx;margin: 30rpx; border: 2px grey solid;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;"
				@click="uplods()">
				<image src="../../static/xj.png" style="width: 80rpx;height: 80rpx;"></image>
			</view>
		</view>
		
		</view>
		<view style="height: 50rpx;"></view>

		<view
			style="border-radius: 10rpx; background-color: #0070D9; text-align: center;height: 90rpx;line-height: 90rpx;color: white;font-weight: bold;"
			@click="addInfo()">
			新增产品
		</view>
		<view style="height: 50rpx;"></view>
	</view>

</template>

<script>
	import api from "../../request/api.js"
	export default {
		data() {
			return {
				//客户信息
				info: {
					name: "", //姓名
					sex: "", //性别
					age: "", //年龄
					mail: "", //邮箱
					phone: "", //手机号
					type: "", //客户类型
					company: "", //公司名称
					address: "", //地址
					remindTime: "", //时间
					content: "", //交流内容	
				},
				sexName: "---请选择---",
				khName1: "---请选择结款方式---",
				gysName: "---请选择供应商---",
				show1: false, //结款方式
				columns1: [
					[{
						label: "是",
						value: 0
					}, {
						label: "否",
						value: 1
					}]
				],
				show2: false, //客户状态
				columns2: [
					[{
						label: "现金",
						value: 0
					}, {
						label: "分期 3期",
						value: 3
					}, {
						label: "分期 6期",
						value: 6
					}, {
						label: "分期 9期",
						value: 9
					}, {
						label: "分期 12期",
						value: 12
					}]
				],
				show3: false, //客户状态
				columns3: [
					[{
						label: "现金",
						value: 0
					}, {
						label: "分期 3期",
						value: 3
					}]
				],
				show4: false,
			};
		},
		methods: {
			//是否含税点击确定
			confirm1(e) {
				console.log(e.value[0])
				this.info.sex = e.value[0].value
				this.sexName = e.value[0].label
				this.show1 = false
			},
			//结账方式确定
			confirm2(e) {
				console.log(e.value[0])
				this.info.type = e.value[0].value
				this.khName1 = e.value[0].label
				this.show2 = false
			},
			//供应商确定
			confirm2(e) {
				console.log(e.value[0])
				this.info.type = e.value[0].value
				this.khName1 = e.value[0].label
				this.show2 = false
			},
			
			//新增供应商
			addgys() {

			},
			//添加客户
			addInfo() {
				api.insertClients(this.info).then(data => {
					console.log(data)
				})
			},
			myfiles() {
				uni.navigateTo({
					url: "/pages/warehouse/inventoryInfo"
				})
			},
		},
	}
</script>

<style lang="less">
	.u-inp {
		padding: 30rpx;
	}

	.iptop {
		background-color: white;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		width: 100%;
		border-radius: 10rpx;
		border: 1rpx solid #E0E0E3;
	}
</style>